<template>
  <div class="edit">
    <div class="edit-title">
      <span class="title-1">资料管理</span> / <span class="title-2">新增</span>
    </div>
    <div class="edit-content">
      <div class="edit-content-title">资料新增</div>
      <div class="edit-content-form">
        <el-form
          :label-position="labelPosition"
          :model="formLabelAlign"
          label-width="80px"
        >
          <el-row :gutter="20">
            <el-col :span="13"
            >
              <div class="grid-content bg-purple">
                <div style="display: flex">
                  <div style="flex: 6">
                    <el-form-item label="资料名称">
                      <el-input
                        v-model="formLabelAlign.name"
                        :rows="7"
                        placeholder="请输入资料名称"
                        type="textarea"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div style="flex: 2; margin-left: 20px">
                    <el-form-item label="封面">
                      <el-upload
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-form-item>
                  </div>
                  <div style="flex: 3; margin-left: 20px; margin-bottom: 20px"><span style="color: red">*</span>建议图片尺寸像素：258（宽度）*145（高度）,大小500kb以下</div>
                </div>
                <el-form-item label="附件上传">
                  <el-upload
                    :file-list="fileList"
                    :on-change="handleChange"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    class="upload-demo set-upload"
                  >
                    <el-button
                      icon="el-icon-upload2"
                      size="small"
                      type="primary"
                    >添加文件
                    </el-button
                    >
                  </el-upload>
                </el-form-item>
                <el-form-item label="关联自测试题名称">
                  <el-select
                    v-model="formLabelAlign.glzc"
                    class="set-form-wid"
                    placeholder="请选择关联自测试题名称"
                  >
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <!--                <el-form-item label="自测试题及格分数线">-->
                <!--                  <el-input-->
                <!--                    v-model="formLabelAlign.zcst"-->
                <!--                    class="set-form-wid"-->
                <!--                    maxlength="11"-->
                <!--                    placeholder="请输入自测试题及格分数线"-->
                <!--                  ></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item label="开放权限">
                  <el-select
                    v-model="formLabelAlign.scopeType"
                    class="set-form-wid"
                    placeholder="请选择开放权限"
                  >
                    <el-option
                      v-for="(item, index) in examScopeOptions"
                      :id="item.id"
                      :key="index"
                      :disabled="item.disabled"
                      :label="item.fullName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <!--                <el-form-item label="所属专题">-->
                <!--                  <el-select-->
                <!--                    v-model="formLabelAlign.sszt"-->
                <!--                    class="set-form-wid"-->
                <!--                    placeholder="请选择所属专题"-->
                <!--                  >-->
                <!--                    <el-option label="区域一" value="shanghai"></el-option>-->
                <!--                    <el-option label="区域二" value="beijing"></el-option>-->
                <!--                  </el-select>-->
                <!--                </el-form-item>-->
                <el-form-item label="下载形式">
                  <el-select
                    v-model="formLabelAlign.xzxs"
                    class="set-form-wid"
                    placeholder="请选择下载形式"
                  >
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="下载所需积分">
                  <el-input
                    v-model="formLabelAlign.jf"
                    class="set-form-wid"
                    placeholder="请输入下载所需积分"
                    type="textarea"
                  ></el-input>
                </el-form-item>
                <el-form-item label="简介">
                  <el-input
                    v-model="formLabelAlign.description"
                    class="set-form-wid"
                    placeholder="请输入简介"
                    type="textarea"
                  ></el-input>
                </el-form-item>
              </div
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="edit-footer">
      <el-button class="edit-footer-btn" @click="goback">取消</el-button>
      <el-button type="primary" @click="submitItem">确定</el-button>
    </div>
  </div>
</template>
<script>
import {addCourse, getTemsCourseDetail} from "@/api/dataCenter/dataCenterApi";

export default {
  data() {
    return {
      labelPosition: "top",
      formLabelAlign: {
        zlmc: "",
        glzc: "",
        zcst: "",
        kfqx: "",
        sszt: "",
        xzxs: "",
        xzjf: "",
        hdxs: "",
      },
      tableDataList: [{}],
      isOk: true,
      examScopeOptions: [
        // {fullName: "全公司", id: "all"},
        // {fullName: "仅创建人", id: "creator"},
        // {
        //   fullName: "部门/人员",
        //   id: "select",
        // },
        {
            "id": "668834371960045637",
            "fullName": "培训考试用户",
            "enCode": "0004",
            "type": "全局",
            "organizeInfo": null,
            "description": "",
            "enabledMark": 1,
            "creatorTime": 1741598943000,
            "sortCode": 0,
            "roleType": "业务角色"
        },
        {
            "id": "669460031602688197",
            "fullName": "大众用户",
            "enCode": "04",
            "type": "全局",
            "organizeInfo": null,
            "description": "",
            "enabledMark": 1,
            "creatorTime": 1741748112000,
            "sortCode": 0,
            "roleType": "业务角色"
        }
      ],
    };
  },
  methods: {
    changeItem() {
      this.isOk = !this.isOk;
    },
    goback() {
      this.$router.go(-1);
    },
    submitItem() {
      addCourse({
        name: this.formLabelAlign.zlmc,
        category: "662577572617416005",
        code: "333",
        courseStudyUserList: null,
        cover:
          "/api/file/Image/annexpic/2024/09/12/course/20240912_604038225870211525.png",
        creatorTime: "2025-03-01 14:22:20",
        creatorUserId: "",
        description: "23123",
        docsLearning: 0,
        docsLearningLength: 0,
        enabledMark: 10,
        evaluation: "",
        favoriteCount: 0,
        favoriteFlag: false,
        homeExam: "",
        homeExamName: null,
        homework: {name: ""},
        homeworkId: null,
        homeworkName: null,
        label: "[]",
        learnUsers: 0,
        learningCredit: 0,
        learningIntegral: 0,
        learningMaterials: "[]",
        learningPeriod: 0,
        likeCount: 0,
        likeFlag: false,
        preventionDpb: 0,
        preventionDsp: 0,
        preventionHp: 0,
        preventionHpMinute: 0,
        scope: "[]",
        scopeOrganizes: "",
        scopeType: "all",
        teacher: "admin",
        temsCourseStudyInfo: null,
      })
        .then((res) => {
          this.$router.go(-1);
        })
        .catch((e) => {
        });
    },
    init() {
      const id = this.$route.query.id;
      getTemsCourseDetail(id).then(res => {
        this.formLabelAlign = res.data
      })
    }
  },
  mounted() {
    this.init()
  }
};
</script>
<style lang="scss" scoped>
.title-top {
  margin-top: 32px;
}

.edit {
  box-sizing: border-box;
  height: 100%;
  position: relative;

  .edit-title {
    font-weight: 500;
    font-size: 19px;
    color: #536387;
    line-height: 29px;
    text-align: left;
    font-style: normal;

    .title-1 {
      color: #536387;
      padding-right: 11px;
    }

    .title-2 {
      padding-left: 11px;
      color: #323232;
    }
  }

  .edit-content {
    width: 100%;
    height: auto;
    background: #fff;
    box-sizing: border-box;
    padding: 32px;
    margin-top: 32px;

    .edit-content-title {
      font-size: 21px;
      width: 100%;
      height: 39px;
      line-height: 21px;
      position: relative;
      padding-left: 11px;
      border-bottom: 1px solid #e2e7f5;

      &:before {
        content: "";
        position: absolute;
        width: 4px;
        height: 21px;
        top: 0;
        left: 0;
        background: #2265ee;
        display: inline-block;
      }
    }

    .edit-content-form {
      margin-top: 32px;
      margin-bottom: 100px;
      margin-left: 24px;
    }
  }

  .edit-footer {
    width: 100%;
    height: 103px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    text-align: right;
    line-height: 103px;

    .el-button {
      width: 100px;
      height: 40px;
      margin-right: 32px;
      background: #2265ee;
      border-box: 1px solid #2265ee;

      &:active {
        opacity: 0.8;
      }
    }
  }
}

.edit-study {
  margin-top: 32px;

  ul {
    list-style: none;
    font-size: 19px;
    color: #0d162a;

    li {
      width: 176px;
      height: 53px;
      display: inline-block;
      line-height: 53px;
      text-align: center;
      cursor: pointer;
    }
  }
}

.active-study {
  background-color: #f6f8fc;
  border-radius: 5px 133px 0px 0px;
}

::v-deep .el-icon-my-zs {
  background: url("../../assets/images/zs1.png") no-repeat;
  width: 20px;
  height: 20px;
}

::v-deep .el-icon-my-zs:before {
  content: "替";
  font-size: 20px;
  visibility: hidden;
}

::v-deep .el-icon-my-zs {
  font-size: 18px;
}

::v-deep .el-icon-my-zs:before {
  content: "\e611";
}

.set-form-wid {
  width: 400px !important;
}

.set-upload {
  ::v-deep .el-upload {
    width: 400px;
    height: 52px;
    background: #ffffff;
    border-radius: 0px 0px 4px 4px;
    border: 1px solid #e2e7f5;
  }

  .el-button {
    background-color: #fff;
    border: none;
    color: #2265ee;
    width: 398px;
    height: 50px;
  }
}

::v-deep .el-textarea__inner {
  resize: vertical !important;
}

.edit-footer-btn {
  background: none !important;
}
</style>
